<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位问题</title>
		<style>
			/* 定位：①相对定位：相对于父级 ，没有父级相对于body
			        ②绝对定位：相对于父级 ，根据页面的左上角进行定位，失去文流
					*/
			div{
				width: 200px;
				height: 200px;
				background-color: #f00;
				border-radius: 50%;
				position: relative;/* 2D相对定位 */
				position: absolute;/* 3D绝对定位 */
				left: 0;
				top: 0;
			}
			.d1{
				background-color: #0055ff;
			}
			.d2{
				border-radius: 0;
			}
			.d3{
				background-color: #ffaa00;
			}
			.d4{
				background-color: #aa4c7e;
			}
			.d5{
				background-color: #ff67b1;
			}
			/* 所有的效果改为四方块，不允许使用div选择器，类选择器 */
			/* 类选择器：通过别名选择元素   css语法：别名{} 
			                              html语法： class="别名"或class="别名1，别名2...."
						多个别名，建议不超过3个，用空格分隔，解决元素选择器，只按照元素名选择器
										  */
		</style>
	</head>
	<body>
		<div class="d1 d"></div>
		<div class="d2 d"></div>
		<div class="d3 d"></div>
		<div class="d4 d"></div>
		<div class="d5 d"></div>
	</body>
</html>